<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-button type="warning" @click="dialogVisible = true"
        >添加用户</el-button
      >
      <el-input
        placeholder="请输入内容"
        v-model="input3"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
    </el-card>

    <!-- 添加对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="form" ref="info">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
          ></el-input>
          <el-input
            v-model="form.age"
            autocomplete="off"
            placeholder="输入年龄"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
          <el-input v-model="form.statusnumber" autocomplete="off" placeholder="输入身份证"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="bingo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog
      title="编辑用户"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="form2">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form2.name"
            autocomplete="off"
          ></el-input>
          <el-input
            v-model="form2.age"
            autocomplete="off"
            placeholder="输入年龄"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form2.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="form2.phone" autocomplete="off"></el-input>
          <el-input v-model="form2.statusnumber" autocomplete="off" placeholder="输入身份证"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="bingo2">确 定</el-button>
      </span>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%" min-width="1000">
      <el-table-column prop="id" label="id" width="100"></el-table-column>
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <el-table-column prop="sex" label="性别" width="100"></el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="statusnumber"
        label="身份证"
        width="200"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100"
    >
    </el-pagination>
    <dialog :dialogVisible="dialogVisible"></dialog>
  </div>
</template>

<script>
import request from '../../../../utils/request'
export default {
  created () {
    this.getUserList() // 不要在created里直接写请求，要新建一个函数方法，将请求写在方法里
  },
  data () {
    return {
      input3: '',
      tableData: [],
      currentPage4: 1,
      dataObj: {
        account: '',
        pagenum: 1,
        pagelen: 5
        // total: 0
      },
      dialogVisible: false,
      dialogVisible2: false,
      form: {
        id: '',
        name: '派华',
        sex: '',
        age: '19',
        phone: '13287987676',
        statusnumber: '21090998887866786'
      },
      form2: {
        id: '',
        name: '',
        sex: '',
        age: '',
        phone: '',
        statusnumber: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    handleEdit (index, row) {
      // 获取到当前点击行的数据
      console.log(index, row)
      this.dialogVisible2 = true
      // 将每一项都填充到对应的input框内
      this.form2 = { ...row }
      this.row = row
    },
    bingo2 () {
      // 获取修改后的input框内容
      console.log(this.form2)
      this.form2.user_id = this.row.id
      // 发起修改请求
      request.get('userupdate/', { params: this.form2 })
        .then(res => {
          console.log(res)
          const { data } = res
          if (data.statusCode !== 0) return this.$message.warning('修改失败')
          this.$message.success('修改成功')
          this.getUserList()
        })
        .catch(err => {
          console.log(err)
        })
      this.dialogVisible2 = false
    },
    handleDelete (index, row) {
      console.log(index, row)
      // 删除用户请求
      request.get('deleteuser/', {
        params: { user_id: this.form.id }
      })
        .then(res => {
          console.log(res)
          const { data } = res
          if (data.statusCode !== 0) return this.$message.warning('删除失败')
          this.tableData.splice(index, 1) // 删除
          this.$message.success('删除成功')
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    search () {
      console.log(this.input3) // 获取搜索框的值
      request
        .get('searchuser/', { // 发起请求
          params: { value: this.input3 }
        })
        .then((res) => {
          console.log(res)
          const { data } = res // 解构出返回的数据
          this.tableData = data // 将搜索到的结果给到tableData渲染
        })
        .catch((error) => {
          console.log(error)
        })
    },
    bingo () {
      this.dialogVisible = false // 让对话框隐藏
      console.log(this.form)
      const infoinfo = { // 收集列表数据
        id: '',
        name: this.form.name,
        sex: this.form.sex,
        age: this.form.age,
        phone: this.form.phone,
        statusnumber: this.form.statusnumber
      }
      // request
      request.get('newadduser/', { params: infoinfo }) // 新增用户请求
        .then(res => {
          console.log(res)
          this.tableData.push(res.data)
          this.getUserList() // 刷新并渲染用户列表
        })
        .catch(error => {
          console.log(error)
        })
    },
    getUserList () {
      request
        .get('Pagination/', {
          params: this.dataObj
        })
        .then((res) => {
          console.log(res)
          const {
            data: { list, status, total }
          } = res
          if (status !== 0) return this.$message.warning('请求失败')
          this.$message.success('请求成功')
          this.tableData = list
          this.total = total
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.el-card,
.el-card__body {
  height: 60px;
}

.el-input {
  float: right;
  width: 300px;
  margin-top: -10px;
}
.el-table--enable-row-transition {
  margin-top: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-pagination {
  margin-top: 20px;
  text-align: left;
}
.el-button {
  width: 60px;
}
.is-always-shadow {
  margin-top: 0px;
  .el-button--warning {
    float: left;
    margin-left: 0px;
    margin-top: -10px;
    width: 120px;
  }
}
.el-dialog .el-input {
  margin-top: 40px;
}
.el-dialog .el-button{
  width: 90px;;
}
</style>

<style>
.el-main {
  line-height: 0px !important;
}
.el-aside {
  height: 1320px !important;
}
.el-menu {
  height: 100% !important;
}
</style>
